<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框编辑测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #303133;
        }
        input[type="number"] {
            width: 200px;
            padding: 8px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
            background-color: #ffffff;
            color: #606266;
        }
        input[type="number"]:hover {
            border-color: #c0c4cc;
        }
        input[type="number"]:focus {
            border-color: #409eff;
            outline: none;
        }
        input[type="number"]:disabled {
            background-color: #f5f7fa;
            color: #c0c4cc;
            cursor: not-allowed;
        }
        .unit {
            margin-left: 10px;
            color: #606266;
        }
        .test-button {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .test-button:hover {
            background-color: #66b1ff;
        }
        .warning-button {
            background-color: #e6a23c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .warning-button:hover {
            background-color: #ebb563;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            background-color: #f0f9ff;
            border: 1px solid #b3d8ff;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>输入框编辑功能测试</h1>
        <p>这个页面用于测试身高体重输入框的编辑功能是否正常。</p>
        
        <div class="form-group">
            <label for="height">身高 (厘米)</label>
            <input type="number" id="height" min="50" max="250" step="0.1" placeholder="厘米" value="171">
            <span class="unit">厘米</span>
        </div>
        
        <div class="form-group">
            <label for="weight">体重 (千克)</label>
            <input type="number" id="weight" min="20" max="300" step="0.1" placeholder="千克" value="71">
            <span class="unit">千克</span>
        </div>
        
        <div class="form-group">
            <button class="test-button" onclick="testEdit()">测试编辑</button>
            <button class="warning-button" onclick="toggleDisabled()">切换禁用状态</button>
            <button class="test-button" onclick="setTestValues()">设置测试值</button>
        </div>
        
        <div class="status" id="status">
            状态: 输入框已启用，可以正常编辑
        </div>
    </div>

    <script>
        function testEdit() {
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const status = document.getElementById('status');
            
            status.innerHTML = `
                状态: 测试编辑功能<br>
                身高输入框: ${heightInput.disabled ? '已禁用' : '已启用'}<br>
                体重输入框: ${weightInput.disabled ? '已禁用' : '已启用'}<br>
                身高值: ${heightInput.value}<br>
                体重值: ${weightInput.value}
            `;
        }
        
        function toggleDisabled() {
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const status = document.getElementById('status');
            
            heightInput.disabled = !heightInput.disabled;
            weightInput.disabled = !weightInput.disabled;
            
            status.innerHTML = `
                状态: 已${heightInput.disabled ? '禁用' : '启用'}输入框<br>
                身高输入框: ${heightInput.disabled ? '已禁用' : '已启用'}<br>
                体重输入框: ${weightInput.disabled ? '已禁用' : '已启用'}
            `;
        }
        
        function setTestValues() {
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const status = document.getElementById('status');
            
            heightInput.value = 175;
            weightInput.value = 70;
            
            status.innerHTML = `
                状态: 已设置测试值<br>
                身高: 175 厘米<br>
                体重: 70 千克<br>
                请尝试手动编辑这些值
            `;
        }
        
        // 页面加载时进行初始测试
        window.onload = function() {
            testEdit();
        };
    </script>
</body>
</html>
